<template>
    <div class="personal-center">
        <div class="a" v-if="autoplay">
            <video ref="video" autoplay></video>
            <el-button type="primary" @click="snap">截图</el-button>
            <el-button type="primary" @click="stopcamera">确定</el-button>
        </div>
        <div class="body" v-else>
            <h1>个人中心</h1>
            <img :src="userInfo.logo" style="width: 200px; height: 200px; margin-top: 20px;">
            <el-card class="user-info" shadow="always">
                <div>{{ userInfo.logo }}</div>
                <div class="email">{{ userInfo.account }}</div>
                <div class="createTime">注册时间：{{ userInfo.createTime }}</div>
                <el-button type="primary" @click="initCamera">修改头像</el-button>
            </el-card>
        </div>
        <canvas ref="canvas" v-if="autoplay" width="640" height="480"></canvas>
    </div>
</template>

<script>
export default {
    data() {
        return {
            autoplay: false,
            userInfo: {
                account: '你的邮箱',
                createTime: '注册时间',
                logo: '头像logo地址',
            },
            formData: null,
        };
    },
    methods: {
        async stopcamera() {
            // 发送POST请求到服务器
            this.$axios.post('http://localhost:8080/user/updateLogo', this.formData, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'token': localStorage.getItem('token')
                }
            }).then(response => {
                console.log(response);
                if (response.data == '修改成功') {
                    this.$message.success('修改成功');
                    this.autoplay = false
                    window.location.reload();
                } else {
                    this.$message.error(response.data);
                }
            }).catch(error => {
                console.log(error);
            });
        },
        uploadImage(base64) {
            // 将Base64字符串转换为Blob对象
            let byteCharacters = atob(base64.split(',')[1]);
            let byteNumbers = new Array(byteCharacters.length);
            for (let i = 0; i < byteCharacters.length; i++) {
                byteNumbers[i] = byteCharacters.charCodeAt(i);
            }
            let byteArray = new Uint8Array(byteNumbers);
            let blob = new Blob([byteArray], { type: 'image/png' });

            // 创建FormData对象并添加文件
            let formData = new FormData();
            formData.append('file', blob, 'image.png');
            this.formData = formData
        },
        snap() {
            this.$refs.canvas.getContext('2d').drawImage(this.$refs.video, 0, 0, 640, 480);
            console.log(this.$refs.canvas.toDataURL());
            this.uploadImage(this.$refs.canvas.toDataURL())
        },
        async initCamera() {
            this.autoplay = true
            try {
                let stream = await navigator.mediaDevices.getUserMedia({ video: true });
                this.$refs.video.srcObject = stream;
            } catch (error) {
                console.error('Error accessing camera:', error);
            }
        },
        getUserInfo() {
            // 发送POST请求到服务器
            this.$axios.post('http://localhost:8080/user/getUserInfo', {
                id: localStorage.getItem('token')
            }, {
                headers: {
                    'token': localStorage.getItem('token')
                }
            }).then(response => {
                console.log(response);
                if (response.data.errorMsg) {
                    this.$message.error(response.data.errorMsg);
                } else {
                    this.$message.success('获取成功');
                    this.userInfo = response.data.success

                }
            }).catch(error => {
                console.log(error);
            });
        },
    },
    mounted() {
        this.getUserInfo()
    }
};
</script>

<style scoped>
.personal-center {
    text-align: center;
    display: flex;
    justify-content: center;
}

.user-info {
    margin: 20px auto;
    width: 300px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.email,
.createTime {
    margin-top: 10px;
}
</style>